<template>
  <div class="container">
    <el-header>
        <h3>报考及套餐说明设置</h3>
    </el-header>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
    >
      <el-table-column
        prop="name"
        label="等级"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="requirement"
        label="要求"
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="package"
        label="套餐"
        width="300"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="199"
      >
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click.prevent="edit(scope.$index,tableData)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {packageList} from '@/api/package'
export default {
    name: 'list',
    inject: ['reload'],
    data () {
        return {
            tableData: [],
            loading: true,
            redirect_url: '/package/edit'
        };
    },
    methods: {
        edit(index, tableData) {
            //获取套餐id
            let level_id = tableData[index].id;
            //params只能搭配name一起使用 相当于 post方式传递参数 不会显示在导航栏
            //query 可以搭配任何方式使用 但是会展示在导航栏中
            this.$router.push({ path: this.redirect_url, query: {id: level_id}});
        }
    },
    mounted () {
        //获取数据信息
        packageList({}).then(response => {
          this.tableData = response.data;
          this.loading = false;
        }).catch(() => {

        })
    }
}
</script>

<style lang="scss" scoped>
  .container {
    min-width: 100%;
    width: 100%;
    overflow: hidden;
    .el-header {
      width: 1001px;
      max-width: 100%;
      position: relative;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
      h3 {
        font-sizze: 20px;
        text-align: center;
        height: 20px;
        line-height: 20px;
      }
    }
    .el-table {
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      position: relative;
      width: 1001px;
      max-width: 100%;
      margin: 0px auto;
    }
  }
</style>
